<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青少年服饰销售分析系统 - 登录</title>
    <link rel="stylesheet" href="theme-dark.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#B399D4',  // 淡紫色
                        secondary: '#D8BFD8',  // 蓟色
                        tertiary: '#F0E6FF',  // 更淡的紫色
                        dark: '#663399',  // 深紫色
                        light: '#FAF5FF'  // 淡紫色背景
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-glass {
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
    
    <style>
        body {
            overflow-x: hidden;
            font-family: 'Inter', sans-serif;
        }
        
        #bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .login-container {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .login-card {
            max-width: 450px;
            width: 100%;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(79, 158, 253, 0.1);
        }
        
        .login-header {
            background: linear-gradient(135deg, #4F9EFD 0%, #96C2FF 100%);
            padding: 30px;
            text-align: center;
            color: white;
        }
        
        .login-body {
            padding: 30px;
            background-color: white;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #4B5563;
        }
        
        .form-input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            outline: none;
            transition: border-color 0.3s ease;
        }
        
        .form-input:focus {
            border-color: #4F9EFD;
            box-shadow: 0 0 0 3px rgba(79, 158, 253, 0.2);
        }
        
        .btn {
            padding: 10px 15px;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: #4F9EFD;
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #3B82F6;
            box-shadow: 0 4px 6px -1px rgba(79, 158, 253, 0.4);
        }
        
        .btn-secondary {
            background-color: white;
            color: #4F9EFD;
            border: 1px solid #4F9EFD;
        }
        
        .btn-secondary:hover {
            background-color: #F3F4F6;
        }
        
        .forgot-password {
            text-align: right;
            margin-bottom: 20px;
        }
        
        .forgot-password a {
            color: #4F9EFD;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .forgot-password a:hover {
            color: #3B82F6;
        }
        
        .register-link {
            text-align: center;
            margin-top: 20px;
        }
        
        .register-link a {
            color: #4F9EFD;
            font-weight: 500;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .register-link a:hover {
            color: #3B82F6;
        }
        
        .tab-buttons {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 1px solid #E5E7EB;
        }
        
        .tab-button {
            flex: 1;
            padding: 10px 15px;
            text-align: center;
            font-weight: 500;
            color: #6B7280;
            cursor: pointer;
            transition: color 0.3s ease;
            position: relative;
        }
        
        .tab-button.active {
            color: #4F9EFD;
        }
        
        .tab-button.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #4F9EFD;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .password-strength {
            height: 4px;
            margin-top: 8px;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .password-strength-bar {
            height: 100%;
            transition: width 0.3s ease;
        }
        
        .strength-indicators {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            font-size: 12px;
            color: #9CA3AF;
        }
        
        .strength-indicator {
            flex: 1;
            text-align: center;
        }
        
        .strength-indicator.strong {
            color: #10B981;
        }
        
        .strength-indicator.medium {
            color: #F59E0B;
        }
        
        .strength-indicator.weak {
            color: #EF4444;
        }
    </style>
</head>
<body class="bg-light font-inter">
    <!-- 主题切换按钮 -->
    <div class="theme-toggle fixed top-4 right-4 z-50">
        <button id="toggle-theme" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
            <i class="fa fa-moon-o"></i>
        </button>
    </div>
    
    <!-- 粒子画布 -->
    <canvas id="bg-canvas"></canvas>
    <canvas id="particles" class="canvas-particles"></canvas>
    
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h1 class="text-2xl font-bold mb-2">青少年服饰销售分析系统</h1>
                <p class="opacity-90">专业的销售数据可视化平台</p>
            </div>
            
            <div class="login-body">
                <div class="tab-buttons">
                    <div class="tab-button active" data-tab="login">登录</div>
                    <div class="tab-button" data-tab="register">注册</div>
                    <div class="tab-button" data-tab="forgot">忘记密码</div>
                </div>
                
                <div class="tab-content active" id="login-tab">
                    <form id="login-form">
                        <div class="form-group">
                            <label for="login-username" class="form-label">用户名</label>
                            <input type="text" id="login-username" class="form-input" placeholder="请输入用户名" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="login-password" class="form-label">密码</label>
                            <div class="relative">
                                <input type="password" id="login-password" class="form-input" placeholder="请输入密码" required>
                                <button type="button" id="toggle-login-password" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="forgot-password">
                            <a href="#" id="forgot-password-link">忘记密码?</a>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-full">登录</button>
                    </form>
                </div>
                
                <div class="tab-content" id="register-tab">
                    <form id="register-form">
                        <div class="form-group">
                            <label for="register-username" class="form-label">用户名</label>
                            <input type="text" id="register-username" class="form-input" placeholder="请输入用户名" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-email" class="form-label">邮箱</label>
                            <input type="email" id="register-email" class="form-input" placeholder="请输入邮箱" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-password" class="form-label">密码</label>
                            <div class="relative">
                                <input type="password" id="register-password" class="form-input" placeholder="请输入密码" required>
                                <button type="button" id="toggle-register-password" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                            
                            <div class="password-strength">
                                <div class="password-strength-bar bg-gray-200" style="width: 0%"></div>
                            </div>
                            
                            <div class="strength-indicators">
                                <div class="strength-indicator">弱</div>
                                <div class="strength-indicator">中</div>
                                <div class="strength-indicator">强</div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="register-confirm-password" class="form-label">确认密码</label>
                            <input type="password" id="register-confirm-password" class="form-input" placeholder="请再次输入密码" required>
                            <p id="password-match-message" class="text-sm mt-2 hidden"></p>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-full">注册</button>
                    </form>
                </div>
                
                <div class="tab-content" id="forgot-tab">
                    <form id="forgot-password-form">
                        <div class="form-group">
                            <label for="forgot-email" class="form-label">邮箱</label>
                            <input type="email" id="forgot-email" class="form-input" placeholder="请输入注册邮箱" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="forgot-code" class="form-label">验证码</label>
                            <div class="flex">
                                <input type="text" id="forgot-code" class="form-input" placeholder="请输入验证码" required>
                                <button type="button" id="send-code-btn" class="btn btn-secondary ml-2">获取验证码</button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="new-password" class="form-label">新密码</label>
                            <input type="password" id="new-password" class="form-input" placeholder="请输入新密码" required>
                        </div>
                        
                        <button type="submit" class="btn btn-primary w-full">重置密码</button>
                    </form>
                </div>
                
                <div class="register-link mt-4">
                    <p>已有账号? <a href="#" id="login-link">立即登录</a></p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 主题切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const toggleBtn = document.getElementById('toggle-theme');
            
            // 检查本地存储的主题偏好
            if (localStorage.getItem('theme') === 'dark' || 
                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.body.classList.add('dark-mode');
                toggleBtn.innerHTML = '<i class="fa fa-sun-o"></i>';
            }

            // 主题切换按钮事件
            toggleBtn.addEventListener('click', function() {
                document.body.classList.toggle('dark-mode');
                const icon = document.body.classList.contains('dark-mode') ? 'sun-o' : 'moon-o';
                this.innerHTML = `<i class="fa fa-${icon}"></i>`;
                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
            });
        });

        // 动态背景
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('bg-canvas');
            const ctx = canvas.getContext('2d');
            
            // 设置画布尺寸
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 创建粒子
            class Particle {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 5 + 1;
                    this.speedX = Math.random() * 3 - 1.5;
                    this.speedY = Math.random() * 3 - 1.5;
                    this.color = `rgba(${179}, ${153}, ${212}, ${Math.random() * 0.7 + 0.3})`;
                    this.targetX = Math.random() * canvas.width;
                    this.targetY = Math.random() * canvas.height;
                    this.oscillation = Math.random() * Math.PI * 2;
                    this.oscillationSpeed = Math.random() * 0.02 + 0.01;
                }
                
                update() {
                    // 平滑移动到目标位置
                    this.x += (this.targetX - this.x) * 0.01;
                    this.y += (this.targetY - this.y) * 0.01;
                    
                    // 添加振荡效果
                    this.oscillation += this.oscillationSpeed;
                    this.x += Math.sin(this.oscillation) * 2;
                    this.y += Math.cos(this.oscillation) * 2;
                    
                    // 随机改变目标位置
                    if (Math.random() < 0.005) {
                        this.targetX = Math.random() * canvas.width;
                        this.targetY = Math.random() * canvas.height;
                    }
                    
                    // 边界检查
                    if (this.x < 0 || this.x > canvas.width) this.speedX *= -1;
                    if (this.y < 0 || this.y > canvas.height) this.speedY *= -1;
                }
                
                draw() {
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            let particles = [];
            const particleCount = 100;  // 增加粒子数量
            
            function init() {
                particles = [];
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new Particle());
                }
            }
            
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                for (let i = 0; i < particles.length; i++) {
                    particles[i].update();
                    particles[i].draw();
                    
                    // 粒子间连线
                    for (let j = i; j < particles.length; j++) {
                        const dx = particles[i].x - particles[j].x;
                        const dy = particles[i].y - particles[j].y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        if (distance < 100) {
                            ctx.beginPath();
                            ctx.strokeStyle = `rgba(${79}, ${158}, ${253}, ${0.1 - distance/1000})`;
                            ctx.lineWidth = 0.5;
                            ctx.moveTo(particles[i].x, particles[i].y);
                            ctx.lineTo(particles[j].x, particles[j].y);
                            ctx.stroke();
                        }
                    }
                }
                
                requestAnimationFrame(animate);
            }
            
            init();
            animate();
            
            // 登录注册表单切换
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    const tabId = button.getAttribute('data-tab');
                    
                    // 移除所有激活状态
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));
                    
                    // 添加当前激活状态
                    button.classList.add('active');
                    document.getElementById(`${tabId}-tab`).classList.add('active');
                });
            });
            
            // 忘记密码链接
            document.getElementById('forgot-password-link').addEventListener('click', (e) => {
                e.preventDefault();
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));
                
                document.querySelector('[data-tab="forgot"]').classList.add('active');
                document.getElementById('forgot-tab').classList.add('active');
            });
            
            // 登录链接
            document.getElementById('login-link').addEventListener('click', (e) => {
                e.preventDefault();
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));
                
                document.querySelector('[data-tab="login"]').classList.add('active');
                document.getElementById('login-tab').classList.add('active');
            });
            
            // 密码可见性切换
            document.getElementById('toggle-login-password').addEventListener('click', function() {
                const passwordInput = document.getElementById('login-password');
                const icon = this.querySelector('i');
                
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                } else {
                    passwordInput.type = 'password';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                }
            });
            
            document.getElementById('toggle-register-password').addEventListener('click', function() {
                const passwordInput = document.getElementById('register-password');
                const icon = this.querySelector('i');
                
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                } else {
                    passwordInput.type = 'password';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                }
            });
            
            // 密码强度检测
            const passwordInput = document.getElementById('register-password');
            const strengthBar = document.querySelector('.password-strength-bar');
            const strengthIndicators = document.querySelectorAll('.strength-indicator');
            
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;
                
                // 密码长度检测
                if (password.length >= 8) strength++;
                if (password.length >= 12) strength++;
                
                // 密码复杂度检测
                if (/[A-Z]/.test(password)) strength++; // 包含大写字母
                if (/[a-z]/.test(password)) strength++; // 包含小写字母
                if (/[0-9]/.test(password)) strength++; // 包含数字
                if (/[^A-Za-z0-9]/.test(password)) strength++; // 包含特殊字符
                
                // 更新强度条
                let percentage = 0;
                let color = '#EF4444'; // 弱
                
                if (strength >= 5) {
                    percentage = 100;
                    color = '#10B981'; // 强
                    strengthIndicators.forEach(indicator => indicator.classList.add('strong'));
                    strengthIndicators.forEach(indicator => indicator.classList.remove('medium', 'weak'));
                } else if (strength >= 3) {
                    percentage = 66;
                    color = '#F59E0B'; // 中
                    strengthIndicators[0].classList.add('weak');
                    strengthIndicators[1].classList.add('medium');
                    strengthIndicators[2].classList.add('medium');
                    strengthIndicators.forEach((indicator, index) => {
                        if (index === 0) indicator.classList.remove('medium', 'strong');
                        else indicator.classList.remove('weak', 'strong');
                    });
                } else {
                    percentage = 33;
                    strengthIndicators[0].classList.add('weak');
                    strengthIndicators[1].classList.add('weak');
                    strengthIndicators[2].classList.add('weak');
                    strengthIndicators.forEach(indicator => indicator.classList.remove('medium', 'strong'));
                }
                
                strengthBar.style.width = `${percentage}%`;
                strengthBar.style.backgroundColor = color;
            });
            
            // 密码匹配检测
            const confirmPasswordInput = document.getElementById('register-confirm-password');
            const passwordMatchMessage = document.getElementById('password-match-message');
            
            confirmPasswordInput.addEventListener('input', function() {
                const password = passwordInput.value;
                const confirmPassword = this.value;
                
                if (password === confirmPassword) {
                    passwordMatchMessage.textContent = '密码匹配';
                    passwordMatchMessage.classList.remove('text-red-500', 'hidden');
                    passwordMatchMessage.classList.add('text-green-500');
                } else if (confirmPassword !== '') {
                    passwordMatchMessage.textContent = '密码不匹配';
                    passwordMatchMessage.classList.remove('text-green-500', 'hidden');
                    passwordMatchMessage.classList.add('text-red-500');
                } else {
                    passwordMatchMessage.classList.add('hidden');
                }
            });
            
            // 验证码倒计时
            document.getElementById('send-code-btn').addEventListener('click', function() {
                const email = document.getElementById('forgot-email').value;
                if (!email) {
                    alert('请先输入邮箱');
                    return;
                }
                
                // 生成随机验证码
                const verificationCode = Math.floor(100000 + Math.random() * 900000);
                localStorage.setItem('verificationCode', verificationCode);
                localStorage.setItem('verificationEmail', email);
                localStorage.setItem('verificationTime', Date.now());
                
                let countdown = 60;
                this.disabled = true;
                this.textContent = `重新发送(${countdown}s)`;
                
                const timer = setInterval(() => {
                    countdown--;
                    this.textContent = `重新发送(${countdown}s)`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        this.disabled = false;
                        this.textContent = '获取验证码';
                    }
                }, 1000);
                
                // 模拟发送验证码
                console.log('发送验证码到邮箱:', email, '验证码:', verificationCode);
                alert(`验证码已发送到您的邮箱 ${email}，请查收 (${verificationCode})`);
            });
            
            // 登录表单提交
            document.getElementById('login-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('login-username').value;
                const password = document.getElementById('login-password').value;
                
                // 从localStorage获取用户数据
                const users = JSON.parse(localStorage.getItem('users') || '[]');
                const user = users.find(u => u.username === username && u.password === password);
                
                if (user) {
                    // 存储登录状态和用户信息
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    localStorage.setItem('isLoggedIn', 'true');
                    
                    // 跳转到仪表盘
                    window.location.href = 'dashboard.html';
                } else {
                    alert('用户名或密码错误');
                }
            });
            
            // 注册表单提交
            document.getElementById('register-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('register-username').value;
                const email = document.getElementById('register-email').value;
                const password = document.getElementById('register-password').value;
                const confirmPassword = document.getElementById('register-confirm-password').value;
                
                if (!username || !email || !password || !confirmPassword) {
                    alert('请填写所有必填字段');
                    return;
                }
                
                if (password !== confirmPassword) {
                    alert('两次输入的密码不匹配');
                    return;
                }
                
                // 检查用户名是否已存在
                const users = JSON.parse(localStorage.getItem('users') || '[]');
                if (users.some(u => u.username === username)) {
                    alert('该用户名已被注册');
                    return;
                }
                
                // 创建新用户
                const newUser = {
                    id: Date.now().toString(),
                    username,
                    email,
                    password,
                    createdAt: new Date().toISOString()
                };
                
                // 添加到用户列表
                users.push(newUser);
                localStorage.setItem('users', JSON.stringify(users));
                
                alert('注册成功，请登录');
                
                // 切换到登录表单
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));
                
                document.querySelector('[data-tab="login"]').classList.add('active');
                document.getElementById('login-tab').classList.add('active');
            });
            
            // 忘记密码表单提交
            document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const email = document.getElementById('forgot-email').value;
                const code = document.getElementById('forgot-code').value;
                const newPassword = document.getElementById('new-password').value;
                
                if (!email || !code || !newPassword) {
                    alert('请填写所有必填字段');
                    return;
                }
                
                // 验证验证码
                const storedCode = localStorage.getItem('verificationCode');
                const storedEmail = localStorage.getItem('verificationEmail');
                const verificationTime = parseInt(localStorage.getItem('verificationTime'));
                
                // 验证码有效期5分钟
                const currentTime = Date.now();
                const isValidTime = (currentTime - verificationTime) < 5 * 60 * 1000;
                
                if (!storedCode || !storedEmail || !isValidTime || code !== storedCode || email !== storedEmail) {
                    alert('验证码无效或已过期');
                    return;
                }
                
                // 更新用户密码
                const users = JSON.parse(localStorage.getItem('users') || '[]');
                const userIndex = users.findIndex(u => u.email === email);
                
                if (userIndex === -1) {
                    alert('该邮箱未注册');
                    return;
                }
                
                users[userIndex].password = newPassword;
                localStorage.setItem('users', JSON.stringify(users));
                
                // 清除验证码
                localStorage.removeItem('verificationCode');
                localStorage.removeItem('verificationEmail');
                localStorage.removeItem('verificationTime');
                
                alert('密码重置成功，请使用新密码登录');
                
                // 切换到登录表单
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.remove('active'));
                
                document.querySelector('[data-tab="login"]').classList.add('active');
                document.getElementById('login-tab').classList.add('active');
            });
        });
    </script>
</body>
</html>
